<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    /*
    * 观察者模式：
    *   目标和观察者是基类，目标提供维护观察者的一系列方法，观察者提供更新接口。具体观察者和具体目标继承各自的基类，
    *   然后具体观察者把自己注册到具体目标里，在具体目标发生变化的时候，调度观察者的更新方法
    *
    * */

    //目标 主题类
    class Subject{
        constructor() {
            this.watcher = [] //保存观察者容器
        }

        addWatcher(watcher){ //添加观察者
            this.watcher.push(watcher) //把观察者添加到保存观察者的容器中
        }

        notify(){ //通知
            this.watcher.forEach((item) => { //item表示观察者的容器中的每一个观察者实例
                item.update() //观察者实例调用更新方法
            })
        }
    }

    //观察者类
    class Watcher{
        constructor(name) {
            this.name = name
        }
       update(){ //更新
           console.log(this.name + "我更新了")
       }
    }

    let subject = new Subject() //目标主题生成实例对象
    subject.addWatcher(new Watcher("张三")) //实例对象调用添加观察者方法，把我们生成的观察者实例对象传入进去
    subject.addWatcher(new Watcher("李四")) //实例对象调用添加观察者方法，把我们生成的观察者实例对象传入进去
    subject.addWatcher(new Watcher("王五")) //实例对象调用添加观察者方法，把我们生成的观察者实例对象传入进去


    subject.notify() //实例对象调用通知方法


</script>
</body>
</html>